import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog } from '../../components/NulDialog';
import { Box, Checkbox, Table, TableBody, TableContainer, TableFooter, TableHead, TableRow } from '@mui/material';
import { AnalyzeResult } from '../../actions/Analyze';
import { NulHeaderTableCell, NulTableCell } from '../../components/NulHeaderTable';
import { removeElementFromArray } from '../../util/Arrays';

interface AnalyzeSingleTextDialogProps {
  open: boolean;
  onClose: () => void;
  result: AnalyzeResult[];
};

function AnalyzeResultDialog(props: AnalyzeSingleTextDialogProps): JSX.Element {
  const { open, onClose, result } = props;

  const [checkedIdList, setCheckedIdList] = React.useState<number[]>([]);

  const onConfirmClicked = () => {
    onClose();
  };

  const headerChecked: boolean = checkedIdList.length !== 0 && checkedIdList.length === result.length;
  const headerIndeterminate: boolean = checkedIdList.length !== 0 && checkedIdList.length < result.length;

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='分析结果'
      operations={
        <NulCommonOperations
          onPositiveClicked={onConfirmClicked}
          onNegativeClicked={() => {
            onClose();
          }}
        />
      }
    >
      <Box sx={{
        marginTop: '20px',
        width: '100%'
      }}>
        <TableContainer
          sx={{
            width: '100%'
          }}
        >
          <Table
            stickyHeader
            sx={{
              border: '1px solid #DFE4E8',
              borderRadius: '8px',
              fontFamily: 'Open Sans',
              fontStyle: 'normal',
            }}
          >
            <TableHead sx={{ border: '8px 8px 0px 0px' }}>
              <TableRow sx={{
                height: '42px',
                padding: 0,
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                backgroundColor: '#F1F3F5',
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px'
              }}>
                <Box sx={{ height: '100%' }}>
                  <NulHeaderTableCell
                    sx={{
                      width: '62px',
                      borderTopLeftRadius: '8px',
                      justifyContent: 'center',
                      flexGrow: 0
                    }}
                  >
                    <Checkbox
                      sx={{
                        width: '42px',
                        display: 'flex',
                        justifyContent: 'center',
                      }}
                      onClick={() => {
                        if (headerChecked) {
                          setCheckedIdList([]);
                        }
                        else {
                          setCheckedIdList(result.map(entry => entry.id));
                        }
                      }}
                      checked={headerChecked}
                      indeterminate={headerIndeterminate}
                    />
                  </NulHeaderTableCell>
                </Box>
                <Box sx={{ display: 'flex', flexDirection: 'row', flexGrow: 1, position: 'relative', height: '100%', paddingRight: '6px' }}>
                  <NulHeaderTableCell sx={{ width: '10%' }}>
                    ID
                  </NulHeaderTableCell>
                  <NulHeaderTableCell sx={{ width: '70%' }}>
                    文本
                  </NulHeaderTableCell>
                  <NulHeaderTableCell sx={{ width: '20%' }}>
                    结果
                  </NulHeaderTableCell>
                </Box>
              </TableRow>
            </TableHead>
            <TableBody
              sx={{
                minHeight: '390px', maxHeight: '390px', display: 'block', overflowY: 'auto'
              }}
            >
              {result.map(row => {
                const checkedIndex: number = checkedIdList.indexOf(row.id);
                return (
                  <TableRow
                    key={row.id}
                    sx={{
                      width: '100%',
                      display: 'flex',
                      alignItems: 'center',
                      height: '42px'
                    }}
                  >
                    <Box sx={{ height: '100%' }}>
                      <NulTableCell sx={{ width: '62px', justifyContent: 'center', flexGrow: 0 }}>
                        <Checkbox
                          sx={{
                            width: '42px',
                            display: 'flex',
                            justifyContent: 'center',
                          }}
                          checked={checkedIndex !== -1}
                          onChange={(event, checked) => {
                            if (checked) {
                              if (checkedIndex === -1) {
                                setCheckedIdList([...checkedIdList, row.id]);
                              }
                            }
                            else {
                              if (checkedIndex !== -1) {
                                setCheckedIdList(removeElementFromArray(checkedIdList, checkedIndex));
                              }
                            }
                          }}
                        />
                      </NulTableCell>
                    </Box>
                    <Box sx={{ display: 'flex', flexDirection: 'row', flexGrow: 1, position: 'relative', height: '100%' }}>

                      <NulTableCell sx={{ width: '10%', display: 'flex' }}>
                        {row.id}
                      </NulTableCell>
                      <NulTableCell sx={{ width: '70%', display: 'flex' }}>
                        {row.text}
                      </NulTableCell>
                      <NulTableCell sx={{ width: '20%', display: 'flex' }}>
                        {row.result ? '正面' : '负面'}
                      </NulTableCell>
                    </Box>
                  </TableRow>
                );
              })}
            </TableBody>
            <TableFooter
              sx={{
                minHeight: '34px',
                maxHeight: '44px',
                display: 'flex',
                backgroundColor: '#F1F3F5',
                borderRadius: '0px 0px 8px 8px',
              }}
            >
              <Box sx={{
                marginLeft: '20px', fontFamily: 'Inter', fontSize: '14px',
                paddingTop: '10px', paddingBottom: '10px',
                color: 'rgb(89, 106, 124)'
              }}>
                共 {result.length} 条记录
              </Box>
            </TableFooter>
          </Table>
        </TableContainer>
      </Box>
    </NulDialog>
  );
}

export default AnalyzeResultDialog;